<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3470558" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">切换至自定义菜单</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100da;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#x100da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100db;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#x100db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100dc;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#x100dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100dd;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#x100dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100de;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#x100de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100df;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#x100df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e0;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#x100e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e1;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#x100e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e2;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#x100e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e3;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#x100e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e4;</span>
                <div class="name">上一曲</div>
                <div class="code-name">&amp;#x100e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e5;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#x100e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e6;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#x100e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e7;</span>
                <div class="name">下一曲</div>
                <div class="code-name">&amp;#x100e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e8;</span>
                <div class="name">踩</div>
                <div class="code-name">&amp;#x100e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100e9;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#x100e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100ea;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#x100ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100eb;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#x100eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100ec;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#x100ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100ed;</span>
                <div class="name">快进</div>
                <div class="code-name">&amp;#x100ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">ArrowRight</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">Arrow-down</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">Calendar</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">Check</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">Arrow-up</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">Chevron-Left 2</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">Chevron-down</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">Chevron-up</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">Chevron-Right 2</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">CheckMark</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">Chevron-Right</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">Clock</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">Eye</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">CloseDefault</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">Download</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">Money</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">More</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">Plus</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">EyeInvisible</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">Redo</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">Resizer</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">Plus-Rectangle</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">Upload</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">Search-20</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">Moon-Star</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">Sun</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">Chevron-Left</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1655388511124'); /* IE9 */
  src: url('iconfont.eot?t=1655388511124#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1655388511124') format('woff'),
       url('iconfont.ttf?t=1655388511124') format('truetype'),
       url('iconfont.svg?t=1655388511124#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 >第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuanzhizidingyicaidan"></span>
            <div class="name">
              切换至自定义菜单
            </div>
            <div class="code-name">.icon-qiehuanzhizidingyicaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuan"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.icon-huiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-zanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqian"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.icon-biaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.icon-xihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyiqu"></span>
            <div class="name">
              上一曲
            </div>
            <div class="code-name">.icon-shangyiqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.icon-fenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiayiqu"></span>
            <div class="name">
              下一曲
            </div>
            <div class="code-name">.icon-xiayiqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cai"></span>
            <div class="name">
              踩
            </div>
            <div class="code-name">.icon-cai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.icon-pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaijin"></span>
            <div class="name">
              快进
            </div>
            <div class="code-name">.icon-kuaijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ArrowRight"></span>
            <div class="name">
              ArrowRight
            </div>
            <div class="code-name">.icon-ArrowRight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Arrow-down"></span>
            <div class="name">
              Arrow-down
            </div>
            <div class="code-name">.icon-Arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Calendar"></span>
            <div class="name">
              Calendar
            </div>
            <div class="code-name">.icon-Calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Check"></span>
            <div class="name">
              Check
            </div>
            <div class="code-name">.icon-Check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Arrow-up"></span>
            <div class="name">
              Arrow-up
            </div>
            <div class="code-name">.icon-Arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-Chevron-Left2"></span>
            <div class="name">
              Chevron-Left 2
            </div>
            <div class="code-name">.icon-a-Chevron-Left2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-down"></span>
            <div class="name">
              Chevron-down
            </div>
            <div class="code-name">.icon-Chevron-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-up"></span>
            <div class="name">
              Chevron-up
            </div>
            <div class="code-name">.icon-Chevron-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-Chevron-Right2"></span>
            <div class="name">
              Chevron-Right 2
            </div>
            <div class="code-name">.icon-a-Chevron-Right2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-CheckMark"></span>
            <div class="name">
              CheckMark
            </div>
            <div class="code-name">.icon-CheckMark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-Right"></span>
            <div class="name">
              Chevron-Right
            </div>
            <div class="code-name">.icon-Chevron-Right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Clock"></span>
            <div class="name">
              Clock
            </div>
            <div class="code-name">.icon-Clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Eye"></span>
            <div class="name">
              Eye
            </div>
            <div class="code-name">.icon-Eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-CloseDefault"></span>
            <div class="name">
              CloseDefault
            </div>
            <div class="code-name">.icon-CloseDefault
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Download"></span>
            <div class="name">
              Download
            </div>
            <div class="code-name">.icon-Download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Money"></span>
            <div class="name">
              Money
            </div>
            <div class="code-name">.icon-Money
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-More"></span>
            <div class="name">
              More
            </div>
            <div class="code-name">.icon-More
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Plus"></span>
            <div class="name">
              Plus
            </div>
            <div class="code-name">.icon-Plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-EyeInvisible"></span>
            <div class="name">
              EyeInvisible
            </div>
            <div class="code-name">.icon-EyeInvisible
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Redo"></span>
            <div class="name">
              Redo
            </div>
            <div class="code-name">.icon-Redo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Resizer"></span>
            <div class="name">
              Resizer
            </div>
            <div class="code-name">.icon-Resizer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Plus-Rectangle"></span>
            <div class="name">
              Plus-Rectangle
            </div>
            <div class="code-name">.icon-Plus-Rectangle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Upload"></span>
            <div class="name">
              Upload
            </div>
            <div class="code-name">.icon-Upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Search-20"></span>
            <div class="name">
              Search-20
            </div>
            <div class="code-name">.icon-Search-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Moon-Star"></span>
            <div class="name">
              Moon-Star
            </div>
            <div class="code-name">.icon-Moon-Star
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sun"></span>
            <div class="name">
              Sun
            </div>
            <div class="code-name">.icon-Sun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-Left"></span>
            <div class="name">
              Chevron-Left
            </div>
            <div class="code-name">.icon-Chevron-Left
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 >第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuanzhizidingyicaidan"></use>
                </svg>
                <div class="name">切换至自定义菜单</div>
                <div class="code-name">#icon-qiehuanzhizidingyicaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuan"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#icon-huiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-zanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqian"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#icon-biaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#icon-xihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyiqu"></use>
                </svg>
                <div class="name">上一曲</div>
                <div class="code-name">#icon-shangyiqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#icon-fenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiayiqu"></use>
                </svg>
                <div class="name">下一曲</div>
                <div class="code-name">#icon-xiayiqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cai"></use>
                </svg>
                <div class="name">踩</div>
                <div class="code-name">#icon-cai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#icon-pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaijin"></use>
                </svg>
                <div class="name">快进</div>
                <div class="code-name">#icon-kuaijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ArrowRight"></use>
                </svg>
                <div class="name">ArrowRight</div>
                <div class="code-name">#icon-ArrowRight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Arrow-down"></use>
                </svg>
                <div class="name">Arrow-down</div>
                <div class="code-name">#icon-Arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Calendar"></use>
                </svg>
                <div class="name">Calendar</div>
                <div class="code-name">#icon-Calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Check"></use>
                </svg>
                <div class="name">Check</div>
                <div class="code-name">#icon-Check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Arrow-up"></use>
                </svg>
                <div class="name">Arrow-up</div>
                <div class="code-name">#icon-Arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Chevron-Left2"></use>
                </svg>
                <div class="name">Chevron-Left 2</div>
                <div class="code-name">#icon-a-Chevron-Left2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-down"></use>
                </svg>
                <div class="name">Chevron-down</div>
                <div class="code-name">#icon-Chevron-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-up"></use>
                </svg>
                <div class="name">Chevron-up</div>
                <div class="code-name">#icon-Chevron-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Chevron-Right2"></use>
                </svg>
                <div class="name">Chevron-Right 2</div>
                <div class="code-name">#icon-a-Chevron-Right2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-CheckMark"></use>
                </svg>
                <div class="name">CheckMark</div>
                <div class="code-name">#icon-CheckMark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-Right"></use>
                </svg>
                <div class="name">Chevron-Right</div>
                <div class="code-name">#icon-Chevron-Right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Clock"></use>
                </svg>
                <div class="name">Clock</div>
                <div class="code-name">#icon-Clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Eye"></use>
                </svg>
                <div class="name">Eye</div>
                <div class="code-name">#icon-Eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-CloseDefault"></use>
                </svg>
                <div class="name">CloseDefault</div>
                <div class="code-name">#icon-CloseDefault</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Download"></use>
                </svg>
                <div class="name">Download</div>
                <div class="code-name">#icon-Download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Money"></use>
                </svg>
                <div class="name">Money</div>
                <div class="code-name">#icon-Money</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-More"></use>
                </svg>
                <div class="name">More</div>
                <div class="code-name">#icon-More</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Plus"></use>
                </svg>
                <div class="name">Plus</div>
                <div class="code-name">#icon-Plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-EyeInvisible"></use>
                </svg>
                <div class="name">EyeInvisible</div>
                <div class="code-name">#icon-EyeInvisible</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Redo"></use>
                </svg>
                <div class="name">Redo</div>
                <div class="code-name">#icon-Redo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Resizer"></use>
                </svg>
                <div class="name">Resizer</div>
                <div class="code-name">#icon-Resizer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Plus-Rectangle"></use>
                </svg>
                <div class="name">Plus-Rectangle</div>
                <div class="code-name">#icon-Plus-Rectangle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Upload"></use>
                </svg>
                <div class="name">Upload</div>
                <div class="code-name">#icon-Upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Search-20"></use>
                </svg>
                <div class="name">Search-20</div>
                <div class="code-name">#icon-Search-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Moon-Star"></use>
                </svg>
                <div class="name">Moon-Star</div>
                <div class="code-name">#icon-Moon-Star</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sun"></use>
                </svg>
                <div class="name">Sun</div>
                <div class="code-name">#icon-Sun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-Left"></use>
                </svg>
                <div class="name">Chevron-Left</div>
                <div class="code-name">#icon-Chevron-Left</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
